<!DOCTYPE html>
<html>
<head>
<title>GrabzIt Web Recorder</title>
<style>
label{
width:10em;
	float:left;
}
.Warning
{
	color:red;
	font-size:1.1em;
	font-weight:bold;
}
.Error
{
	color:red;
}
.Success
{
	color:green;
}
.Error,.Success
{
    float:left;
    clear:both;
    width:100%;
	font-weight:bold;
	margin-top:0.5em;
	margin-bottom:0.5em;
	display:none;
}
</style>
<script type="text/javascript" src="grabzitwebrecorder.min.js"></script>
<script type="text/javascript">
GrabzItWebRecorder.record('myForm');

function takeScreenshot()
{
	var message = document.getElementById('spnMessage');
	message.innerHTML = 'Processing screenshot...';
	message.style.display = 'block';

	var screenshots = document.getElementById('screenshot');
	screenshots.innerHTML = '';

	GrabzItWebRecorder.AddTo('YOUR APPLICATION KEY', 'screenshot', {'target':'myForm','width':-1,'height':-1,'onerror':'errored','onfinish':'finished'});
}

function finished(id)
{
	document.getElementById('spnMessage').style.display = 'none';
	document.getElementById('spnError').style.display = 'none';
}

function errored(message, code)
{
	var error = document.getElementById('spnError');
	error.innerHTML = message;
	error.style.display = 'block';
}
</script>
</head>
<body>
<p class="Warning">Warning! This demo will only work on a publicly accessible web server as GrabzIt needs to be able to take a screenshot of this page.</p>
<p>To see GrabzIt capture the form contents fill in some fields below and click the "Capture Issue" button. Then wait a few seconds for the screenshot to appear.</p>
<form method="get" id="myForm">
<fieldset>
<label>Issue Title</label><input type="text" name="title" value=""/> <a href="www.google.com">More information</a><br/><br/>
<label>Deparment</label><input type="text" value="Department" name="age"/><br/>
<label>Progress</label><select name="age">
<option value="baby">started</option>
<option value="child">in progress</option>
<option value="adult" selected="selected">finished</option>
</select><br/><br/>
<label>Importance</label><input type="radio" name="categories" value="high" /> high
<input type="radio" name="categories" value="medium" /> medium
<input type="radio" name="categories" value="low" /> low</br><br/>
<label>Authorized?</label><input id="box" type="checkbox" name="authorized" checked="checked" value="optionon"/><br/><br/>
<label>Assigned to</label><input type="text" value="" name="assignedto"/><br/><br/>
<label>Description</label><textarea name="free">An error occured with...</textarea><br/><br/>
<input type="button" value="Capture Issue" onclick="takeScreenshot();"/>
</fieldset>
</form>
<span id="spnMessage" class="Success"></span><span id="spnError" class="Error"></span>
<fieldset>
<legend>Screenshot of Form</legend>
<div id="screenshot"></div>
</fieldset>
</body>
</html>